<template>
  <div class="children-c-container">
    <span>vuex使用 - 子组件C</span>
    <div class="info">
      <div>数据: {{ msg }}</div>
      <div>{{ $store.state.count }}</div>
      <div>获取的性别数据{{ genderbos }}</div>
      <ul>
        <li>name:{{ name }}</li>
        <li>age:{{ age }}</li>
        <li>friend:{{ friend }}</li>
      </ul>
      <ul>
        <li>子组件的数据</li>
        <li>测试一个单独的值bar {{ computerBar }}</li>
        <li>测试一个单独的值foo {{ foo }}</li>
        <li>测试一个对象的值baz.hello {{ baz.hello }}</li>
      </ul>
    </div>
    <div class="control">
      <button @click="changeName">发快递</button>
      <button @click="changeSigle">改bar</button>
      <button @click="changeSigle2">改foo</button>
      <button @click="changeObject">改对象</button>
    </div>
  </div>
</template>

<script>
// 导入辅助函数
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'children-c',
  inject: ['baz', 'bar', 'foo'],
  data () {
    return {
      msg: '我要发快递了',
      testBar: this.bar()
    }
  },
  methods: {
    changeName () {
      // this.$store.state.name = '中华小当家'
      // 触发 mutation
      // 不传参
      // this.$store.commit('changeName')
      // 传参
      // this.$store.commit('changeName', '海绵宝宝')
      this.$eventBus.$emit('send', '你的快递到了')
      this.msg = '检查一下AB收到没有'
    },
    changeSigle () {
      console.log('改bar', this.$parent)
      this.$parent.bar = '子组件的bar--222222222'
      // this.bar = '子组件的bar--222222222'
      // this.computerBar = '子组件的bar--222222222'
    },
    changeSigle2 () {
      this.foo = '子组件的foo--222222222'
    },
    changeObject () {
      this.baz.hello = '子组件的你好aaaaaaaaaaa'
    }
  },
  computed: {
    ...mapGetters(['genderbos']),
    ...mapState(['name', 'age', 'friend']),
    // 返回一个对象,内部已经设置好了计算属性取值
    computerBar: {
      get: function () {
        return this.bar()
      },
      set: function (val) {}
    }
  },
  watch: {
    computerBar (val) {
      console.log(val)
    }
  }
}
</script>

<style lang="less">
.children-c-container {
  height: 42vh;
  width: 35vw;
  background-color: rgb(177, 42, 87);
  padding: 15px;
  .control {
    padding: 5px 10px;
    button {
      border: none;
      cursor: pointer;
      padding: 5px 10px;
      border-radius: 5px;
      &:hover {
        background-color: #e7e7e7;
      }
    }
  }
}
</style>
